
<template>
  <div class="side__all">
      <el-menu
        :default-active="default_active"
        background-color="transition"
      >


        <div  v-for="item, k in menu_list">

              <!-- <el-sub-menu :index="item.index"  v-if="item.sub_list">
                <template #title><span><svg-icon :name="item.icon" :size="20"></svg-icon></span>
                <span>{{ item.title }}</span>
                
              </template>
                    <el-menu-item :index="it.index"  v-for="it, ind in item.sub_list" @click="goto_url_path(it)">
                      <span><svg-icon :name="it.icon" :size="20"></svg-icon></span>
                      <template #title>{{ it.title }}</template>
                  </el-menu-item>
              </el-sub-menu> -->

              <el-menu-item :index="item.index" @click="goto_url_path(item)" >
              <span><svg-icon :name="item.icon" :size="20"></svg-icon></span>
              <template #title>{{ item.title }}</template>
            </el-menu-item>
            
        </div>
        
        <!-- <el-menu-item index="2">
           <span><svg-icon name="icon-lanya" :size="20"></svg-icon></span>
          <template #title>BLE管理</template>
        </el-menu-item>
        <el-menu-item index="3">
           <span><svg-icon name="icon-icon" :size="20"></svg-icon></span>
          <template #title>设备显示</template>
        </el-menu-item> -->
        
      </el-menu>
    </div>
    </template>
     
    <script setup>
    import { ref, onMounted, computed } from "vue"
    import { useRouter, useRoute } from "vue-router"


    const default_active = ref('1-1')


    const route = useRoute()
    const router = useRouter()

    const menu_list = ref([
      {"title": "首页", "icon": "icon-B-", "to_path": "/home", 'index': '1'},
      {"title": "聊天助手", "icon": "icon-AIliaotian", "to_path": "/home/chat", 'index': '2'},
      {"title": "AI应用", "icon": "icon-AIzhibo-AIshengcheng", "to_path": "/home/ai_app", 'index': '3'},
      {"title": "RAG助手", "icon": "icon-AI", "to_path": "/home/rag_chat", 'index': '4'},
      {"title": "个人中心", "icon": "icon-yonghu", "to_path": "/home/userinfo", 'index': '5'},
    ])


    function goto_url_path(item){
      default_active.value = item.index
      router.push({path: item.to_path})
      
    }

    function get_cursor_default_active(data_list){
      for (var i=0; i<data_list.length; i++){
        
        var item = data_list[i]
        if (item['sub_list']){
          for (var j=0; j<item['sub_list'].length; j++){
            var it = item['sub_list'][j]
            if (String(route.path)==it.to_path){
              // default_active.value = it.index
              return it.index
            }
          }
        }else{
          if (String(route.path)==item.to_path){
            // default_active.value = item.index
            
            return item.index
          }
        }
      }
      return '1-1'
    }

    onMounted(()=>{
      var a = get_cursor_default_active(menu_list.value)
      default_active.value = a
    })

    </script>
    <style scoped lang="scss">

    
    .side__all{
      height: 100%;
      
      .el-menu{
        background-color: #409eff;
        border: none;
          .el-sub-menu{
            
            :deep(.el-sub-menu__title) {
              color: #fff;
              border-radius: 8px;
              margin-bottom: 10px;
            }
            :deep(.el-sub-menu__title:hover){
              background-color: transparent;
            }
          }
        
        

        .el-menu-item{
          color: #fff;
          font-size: 16px;
          font-weight: 500;
          // padding-left: 50px;
          border-radius: 8px;
          margin-bottom: 10px;
          span{
            svg{
              fill: '#fff';
            }
            
          }
          
        }
        .el-menu-item:hover{
          background-color: #82c9f2;
        }
        .el-menu-item.is-active{
          // color: #e00204;
          background-color: #82c9f2;
        }
      }
    }
      svg {
        width: 1em;
        height: 1em;
        margin-right: 5px;
      }
      // 记得要有这个，控制侧边菜单宽度，意思是折叠的时候，宽度自适应，不着折叠的时候宽度为200px
      .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        min-height: 400px;
      }
      .el-menu {
        height: 100%;
      }


      
    </style>

    <style lang="scss">
  .el-menu--vertical{
        .el-menu{
          background-color: #409eff;
          .el-menu-item{
            color: #fff;
          }
          .el-menu-item:hover{
          background-color: #82c9f2;
        }
        .el-menu-item.is-active{
          // color: #e00204;
          background-color: #82c9f2;
        }
        }
      }
  </style>